<template>
  <view>
    <bx-page headerLeft="请选择打印机进行编辑" title="云打印设备管理">

      <template #headerRight>
        <!-- <button class="button line-white" @click="gotoSeeLog">查看日志</button> -->
      </template>

      <template #content>
        <o-row gutter="10">
          <o-col :key="item.uuid" v-for="(item,index) in list" span="8">
            <view @click="handleCard(item)" class="menu-tow-box noAdd card-Item">
              <view class="parent-jx" :class="{
                'bg-red':item.online_state == '在线异常',
                'bg-green':item.online_state == '在线'
              }">
                {{item.online_state}}
              </view>
              <view class="top-content">
                <view class="left-content">
                  <image class="center-image" src="/static/images/setup/cloudPrint/static/nonePrint.png" />
                </view>
                <view class="right-content">
                  <view style="line-height: 30px;" class="item-font">
                    {{item.type_name}}
                  </view>
                  <view style="line-height: 30px;" class="item-font">
                    {{item.device_name}} {{item.sn}}
                  </view>
                  <view class="item-font">
                  </view>
                </view>
              </view>

              <view class="bottom-content">
                <view class="left" @click.stop="changeChecked(item)">
                  <text class="cuIcon-roundcheckfill radio checked" v-if="item.checked "></text>
                  <text class="cuIcon-round radio" v-else></text>
                  <text class="margin-left" v-if="item.checked">默认设备</text>
                  <text class="margin-left" v-else>设为默认</text>
                </view>
                <view class="text">点击操作</view>
              </view>
            </view>
          </o-col>

          <o-col span="8">
            <view @click="gotoAdd" class="menu-add-box card-Item">
              <view class="top-content">
                <view class="relative-box">
                  <image class="center-image" src="/static/images/setup/cloudPrint/static/nonePrint.png" />
                </view>
              </view>
              <view class="bottom-content">
                <view class="text">添加云打印器</view>
              </view>
            </view>
          </o-col>
        </o-row>
      </template>
    </bx-page>

    <view class="custom-center-popup">
      <u-popup :show="isAdd" :round="20" mode="center" :overlay="true" :closeable="false" :closeOnClickOverlay="false"
        @close="closeAdd">
        <view class="remark-view">
          <view style="" class="popup-title flex justify-between">
            <text> {{popupTitle||'添加'}}</text>
            <text class="cuIcon-close" @click="isAdd=false"></text>
          </view>
          <bx-form serviceName="srvdev_device_printer_add" type="add" @on-submit="addClassifySuccess"
            @cancel="closeAdd" @cols-v2-loaded="v2Loaded">
          </bx-form>
        </view>
      </u-popup>
    </view>

    <view class="custom-center-popup">
      <u-popup :show="isEdit" :round="20" mode="center" :overlay="true" :closeable="false" :closeOnClickOverlay="false"
        @close="isEdit = false">
        <view class="remark-view">
          <view style="" class="popup-title flex justify-between">
            <text> {{popupTitle||'编辑'}}</text>
            <text class="cuIcon-close" @click="isEdit=false"></text>
          </view>
          <bx-form v-if="nowHandleItem" :pk="nowHandleItem.id" serviceName="srvdev_device_printer_update" type="update"
            @on-submit="addClassifySuccess" @cancel="isEdit = false" @cols-v2-loaded="v2Loaded">
          </bx-form>
        </view>
      </u-popup>
    </view>

    <view class="custom-center-popup">
      <u-popup :show="isHandle" :round="20" mode="center" :overlay="true" :closeable="false" :closeOnClickOverlay="true"
        @close="isHandle = false">
        <view class="remark-view" style="width: 110rem;" v-if="nowHandleItem">
          <view style="padding: 4rem 4rem 0;" class="popup-title flex justify-between">
            <text>操作</text>
            <!-- <text @click="editCloudPrint" class="text-green" v-if="nowHandleItem">编辑云打印</text> -->
          </view>
          <view class="content-box2">
            <view class="banner">
              <view class="parent-jx" :class="{
                'bg-red':nowHandleItem.online_state == '在线异常',
                'bg-green':nowHandleItem.online_state == '在线'
              }">
                {{nowHandleItem.online_state}}
              </view>
              <view class="left">
                <image class="center-image" src='/static/images/setup/cloudPrint/static/bluePrint.png' />
              </view>
              <view class="right">
                <view style="margin-bottom:1.4rem;" class="text" v-if="nowHandleItem">
                  {{nowHandleItem.type_name}}
                </view>
                <view class="text" v-if="nowHandleItem">
                  {{nowHandleItem.device_name}} {{nowHandleItem.sn}}
                </view>
              </view>
            </view>

            <view class="buttons">
              <view style="display: flex;">
                <button class="button line-white margin-right" @click="editCloudPrint"
                  v-if="nowHandleItem">编辑云打印</button>
                <button class="button line-white margin-right" @click="deletePrint">删除打印机</button>
                <button class="button line-white margin-right" @click="editCloudsetUp">打印设置</button>
                <button class="button margin-right line-white" @click="printTest">打印测试单</button>
                <button class="button line-white margin-right" @click="cancleOrder(nowHandleItem)">取消未打印订单</button>
              </view>
            </view>
          </view>
        </view>
      </u-popup>
    </view>

    <view class="custom-center-popup">
      <u-popup :show="isPrintSetup" :round="20" mode="center" :overlay="true" :closeable="false"
        :closeOnClickOverlay="true" @close="isPrintSetup = false">
        <view class="remark-view">
          <view style="" class="popup-title">
            打印设置
          </view>
          <bx-form v-if="nowHandleItem" serviceName="srvdev_device_printer_print_update" :pk="nowHandleItem.id"
            type="update" @on-submit="addClassifySuccess" @cancel="isPrintSetup = false">
          </bx-form>
        </view>
      </u-popup>
    </view>

  </view>
</template>

<script>
  export default {

    data() {
      return {
        isAdd: false,
        list: [],
        isPrintSetup: false,
        isEdit: false,
        isHandle: false,
        nowHandleItem: null,
        popupTitle: ''
      }
    },
    methods: {
      v2Loaded(e) {
        this.popupTitle = e?.service_view_name
      },
      gotoSeeLog() {
        uni.navigateTo({
          url: '/pages/main/setup/cloudPrint/seelog'
        })
      },
      cancleOrder() {
        const req = [{
          "serviceName": "srvls_device_print_cancel",
          "data": [{
            "store_no": this.nowHandleItem.store_no,
            "sn": this.nowHandleItem.sn
          }],
          "srvApp": "retail",
          "condition": [{
            "colName": "id",
            "value": `${this.nowHandleItem.id}`,
            "ruleType": "in"
          }]
        }];
        const url = "/retail/operate/srvls_device_print_cancel";
        this.isHandle = false;
        uni.showModal({
          title: '提示',
          content: '确认要删除未打印订单',
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: '加载中'
              });
              this.$http.post(url, req).then(res => {
                if (res?.data?.state === 'SUCCESS') {
                  uni.hideLoading();
                  uni.showToast({
                    title: '删除成功',
                    duration: 2000,
                    icon: 'none'
                  });
                } else {
                  uni.hideLoading();
                  uni.showToast({
                    title: res.data.resultMessage,
                    duration: 2000,
                    icon: 'none'
                  });
                }
                this.getList();
              }).catch(_ => {
                uni.hideLoading();
                uni.showToast({
                  title: '删除失败',
                  duration: 2000,
                  icon: 'none'
                });

              })
            }
          }
        })
      },
      printTest() {
        const url = `/retail/operate/srvls_device_print`
        const req = [{
          "serviceName": "srvls_device_print",
          "data": [{
            "store_no": this.nowHandleItem.store_no,
            "sn": this.nowHandleItem.sn,
            "printContent": this.nowHandleItem.content_sample_new
            // "printContent": this.nowHandleItem.content_sample
          }],
          "srvApp": "retail",
          "condition": [{
            "colName": "id",
            "value": this.nowHandleItem.id,
            "ruleType": "in"
          }]
        }]
        this.$http.post(url, req).then(res => {
          uni.showToast({
            title: res?.data?.resultMessage,
            icon: "none"
          })
        })
      },
      deletePrint() {
        const req = [{
          "serviceName": "srvdev_device_printer_delete",
          "condition": [{
            "colName": "id",
            "ruleType": "in",
            "value": `${this.nowHandleItem.id}`
          }]
        }];
        this.isHandle = false;
        const url = "/retail/operate/srvdev_device_printer_delete";
        uni.showModal({
          title: '提示',
          content: '确认要删除该云打印机',
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({
                title: '加载中'
              })
              this.$http.post(url, req).then(res => {
                uni.hideLoading();
                if (res?.data?.state === 'SUCCESS') {
                  uni.showToast({
                    title: '删除成功',
                    duration: 2000,
                    icon: 'none'
                  });
                }
                this.getList();

              }).catch(_ => {
                uni.hideLoading()
              })
            }
          }
        })
      },
      editCloudPrint() {
        this.isEdit = true;
        this.isHandle = false;
      },
      editCloudsetUp() {
        this.isPrintSetup = true;
        this.isHandle = false;

      },
      handleCard(item) {
        this.nowHandleItem = item;
        this.isHandle = true;
      },
      editPrint() {
        this.isPrintSetup = true;
      },
      gotoAdd() {
        this.isAdd = true
      },
      closeAdd() {
        this.isAdd = false;
      },
      addClassifySuccess(data) {
        this.isAdd = false;
        this.isEdit = false;
        this.isPrintSetup = false;
        this.getList()
      },
      async setDefaultDevice(id) {
        const url = `/retail/operate/srvdev_device_printer_defult_update`
        const req = [{
          "serviceName": "srvdev_device_printer_defult_update",
          "data": [{
            "whether_defult": "是"
          }],
          "condition": [{
            "colName": "id",
            "value": id,
            "ruleType": "eq"
          }]
        }]
        const res = await this.$http.post(url, req)
        if (res?.data?.state === 'SUCCESS') {
          return true
        } else {
          return false
        }
      },
      changeChecked(e) {
        if (e.checked === true) {
          return
        }
        uni.showModal({
          title: '提示',
          content: '是否将当前设备设为默认设备?',
          success: (res) => {
            if (res.confirm) {
              this.setDefaultDevice(e.id).then(() => {
                this.getList()
              })
              return
            }
          }
        })
      },
      getList() {
        uni.showLoading({
          title:'加载中...'
        })
        const url = `/retail/select/srvdev_device_printer_select`;
        const req = {
          "serviceName": "srvdev_device_printer_select",
          "colNames": ["*"],
          "condition": [],
        }
        this.$http.post(url, req).then(res => {
          if (res?.data?.state === 'SUCCESS') {
            res.data.data.forEach((item) => {
              item.uuid = this.getUuid();
            })
            this.list = res.data.data.map(item => {
              item.checked = false;
              if (item.whether_defult === '是') {
                item.checked = true;
              }
              return item
            });
          }
          uni.hideLoading()
        }).catch(_ => {
          uni.hideLoading()
        })
      },
      toPages(target) {
        if (target) {
          uni.navigateTo({
            url: target
          })
        }
      }
    },
    onPullDownRefresh() {
      this.getList()
      setTimeout(()=>{
        uni.stopPullDownRefresh()
      },2000)
    },
    onLoad() {
      this.getList();
    }
  }
</script>

<style lang="scss" scoped>
  .noAdd {
    background: rgba(245, 245, 245, 1);
  }

  .custom-center-popup {
    ::v-deep .form-wrapper {
      padding-top: 0;
      flex: 1;

      .bx-form {
        height: 100%;
        overflow-y: scroll;
        // display: flex;
        // flex-direction: column;
        // .a-form{
        //   flex: 1;
        //   overflow-y: scroll;
        // }
      }
    }
  }

  .remark-view {
    width: 50vw;
    max-height: 80vh;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
  }

  .center-image {
    width: 20rem;
    height: 20rem;
    padding: 3rem;
  }

  .card-Item {
    cursor: pointer;
    // height: 24rem;
    height: 30rem;
    display: flex;
    flex-direction: column;
    padding: 3rem;
  }

  .content-box2 {

    padding: 5rem 4rem;
    padding-top: 0;

    .firt-row {
      display: flex;
      font-size: 1.6rem;
      justify-content: space-between;

      .base-font {
        font-size: 15px;
      }

      .base-edit {
        font-size: 1.4rem;
        color: blue;
      }
    }

    .banner {
      background: rgba(245, 245, 245, 1);
      border-radius: 6px;
      margin-top: 3rem;
      display: flex;
      position: relative;

      .left {
        display: flex;
        // flex: 3;
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;


        .text {
          font-size: 3rem;
        }

      }
    }

    .bottom-content {
      display: flex;
      width: 100%;
      flex-direction: row-reverse;
      margin-top: 10px;
    }

    .buttons {
      display: flex;
      flex-direction: row-reverse;
      margin-top: 5rem;
    }
  }

  .relative-box {
    position: relative;

    .addIcon {
      position: absolute;
      width: 41px;
      height: 55px;
      left: 77px;
      top: 65px;
    }
  }

  .background-image {
    width: 72px;
    height: 28px;
  }


  .menu-add-box {
    border: 2px dashed rgba(166, 166, 166, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top-content {
      display: flex;
      justify-content: center;
    }

    .bottom-content {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .text {
        font-weight: 700;
        font-size: 3rem;
        color: rgba(56, 192, 158, 1);
      }
    }
  }

  .menu-card-item {
    display: flex;
    cursor: pointer;
  }

  .parent-jx {
    position: absolute;
    right: -3px;
    top: -1px;
    z-index: 10000;
    background-color: #999;
    color: #fff;
    width: 8rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 3rem;
    border-bottom-left-radius: 0;
    font-size: 2.4rem;

    &.bg-green {
      background-color: #38C09E;
    }

    &.bg-red {
      background-color: #FF5733;
    }

    // .small-font {
    //   position: absolute;
    //   top: 50%;
    //   left: 50%;
    //   margin-left: -19px;
    //   margin-top: -14px;
    //   font-size: 15px;
    //   font-weight: 400;
    //   z-index: 200;
    //   color: white;
    //   background-color: #999;
    // }



  }



  .content-box {
    padding: 3rem 3rem;
    display: flex;
    flex-direction: column;

    width: 100%;


    .title-top {
      display: flex;
      justify-content: space-between;
      padding: 60rpx 50rpx;

      .right-button {
        font-weight: 500;
      }

      .left-title {
        font-size: $retail-font-size-lg;

        font-weight: 700;
        color: #333333;
      }

    }

    .container {
      width: 100%;
      flex: 1;
      overflow-y: scroll;

      .menu-tow-box {
        border-radius: 4rpx;
        // box-shadow: 0px 1px 2px #666;
        position: relative;
        margin-bottom: 1.1rem;
        // padding-top: 25px;

        .top-content {
          display: flex;

          .right-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            // justify-content: space-between;

            .item-font {
              word-wrap: break-word;
              font-size: 2.7rem;
              font-weight: 500;

            }
          }
        }


        .bright-content {
          .menu-card-item {
            border-top: 1px solid #c8cdcf;
            border-bottom: 1px solid #c8cdcf;
            margin-bottom: 20px;
            border-radius: 4px;
            padding: 28rpx 102rpx;
            height: 252rpx;

            .right-content {
              padding-left: 60rpx;
              display: flex;
              align-items: center;
              height: 100%;
              font-size: $retail-font-size-lg;
              font-weight: 700;
            }
          }
        }

        .image-icon {
          width: 189rpx;
          height: 192rpx;
        }

        .bottom-content {
          width: 100%;
          // padding: 0 4rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;

          .left {
            font-size: 2.4rem;
            display: flex;
            align-items: center;

            .radio {
              font-size: 4rem;
              color: #999;

              &.checked {
                color: #38C09E;
              }
            }
          }

          .text {
            font-weight: 700;
            font-size: 3rem;
            color: rgba(56, 192, 158, 1);
          }
        }
      }

    }


  }
</style>
